<template>
    <van-button type="primary" size="large">   {{teamName}}   的聊天
    <van-icon name="chat-o"/>
    </van-button>
    <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o" >
        江畔何人初见月, 江月何年初照人
    </van-notice-bar>

    <div v-for="teamMessage in teamMessageList">
            <p v-if="isShow(teamMessage.from_id)">
                <font color="blue" size="small" face="宋体">我：</font>
                <van-notice-bar color="#1989fa" background="#ecf9ff"
                                wrapable
                                :scrollable="false"
                                :text="teamMessage.content"
                />
<!--                {{currentUser}}-->
            </p>

            <p v-else>
                <font color="orange" size="small" face="宋体">{{teamMessage.from_userName}}:</font>
                <van-notice-bar
                        wrapable
                        :scrollable="false"
                        :text="teamMessage.content"
                />
            </p>
        </div>




    <!--当搜索结果为空时显示的界面-->
    <van-empty v-if="!teamMessageList || teamMessageList.length < 1" description="聊天记录为空" />


    <van-cell-group inset>
        <van-field
                v-model="teamMessageContent"
                rows="5"
                autosize
                label="请输入："
                type="textarea"
                maxlength="200"
                placeholder="请输入聊天内容"
                show-word-limit
        />
    </van-cell-group>

    <van-button type="primary" size="large" @click="doSendTeam">发送</van-button>
</template>

<script setup lang="ts">
    import {useRoute, useRouter} from "vue-router";
    import {ref,onMounted} from "vue";
    import myAxios from "../plugin/myAxios";
    import qs from 'qs';
    import {showToast} from "vant/lib/vant.es";
    import {getCurrentUser} from "../services/user";
    import {getCurrentUserState, setCurrentUserState} from "../states/user";
    import {UserType} from "../models/user";

    const router = useRouter();

    const route = useRoute();

    //当点击“联系我”时，获取 点击的用户的username和用户id
    const teamId = route.query.teamId;
    const teamName = route.query.teamName;


    //获取当前用户
    const currentUser= getCurrentUserState();

    //每次在队伍发送的信息
    const teamMessageContent = ref('');
    //用于存放从后端加载来的所有的聊天记录
    const teamMessageList = ref([]);

    // 如果teamMessage中的from_id = 当前用户id,那就说明这个是当前登录用户发的，否则是其他人发的
    const isShow = (id:number) =>{
        return id === currentUser.id;
    }


    //发送信息
    const doSendTeam = async () => {

        const res = await myAxios.post("/teamMessage/add", {
                teamId: Number(teamId),
                content:teamMessageContent.value
        });
        if (res.code === 0 && res.data){
            showToast('发送成功');
            //清空信息
            teamMessageContent.value = '';
            //重新获取信息，使发送的信息能够实时更新
            await doGetTeam();
        }else {
            showToast('发送失败');
        }
    };



    //获取信息
    const doGetTeam = async () => {

        const res = await myAxios.get("/teamMessage/get", {
            params: {
                teamId:teamId
            },
        });
        //如果获取到符合标签的用户，就存到userList中
        if (res?.code === 0){
            teamMessageList.value = res.data;
            // showToast("获取群聊记录成功");
        }else {
            showToast("获取群聊记录失败");
        }

    };

    // setInterval(function () { //每5秒刷新一次,获取一次信息
    //     doGetTeam();
    //
    // }, 5000);


    //使用钩子:onMounted，当页面元素加载好之后执行
    onMounted(async () => {

        await doGetTeam();

    })




</script>

<style scoped>

</style>